<template>
  <div class="demo">
    <div class="demo-title">带页签的卡片</div>
    <div class="demo-content">
      <Card
        style="width: 100%"
        title="Card title"
        :tab-list="tabList"
        :active-tab-key="key"
        @tab-change="(key) => onTabChange(key, 'key')"
      >
        <template #customTab="item">
          <span v-if="item.key === 'tab1'">
            <home-outlined />
            {{ item.key }}
          </span>
        </template>
        <template #extra>
          <a href="#">More</a>
        </template>
        {{ contentList[key] }}
      </Card>
      <br />
      <br />
      <Card
        style="width: 100%"
        :tab-list="tabListNoTitle"
        :active-tab-key="noTitleKey"
        @tab-change="(key) => onTabChange(key, 'noTitleKey')"
      >
        <p v-if="noTitleKey === 'article'">article content</p>
        <p v-else-if="noTitleKey === 'app'">app content</p>
        <p v-else>project content</p>
        <template #tabBarExtraContent>
          <a href="#">More</a>
        </template>
      </Card>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { HomeOutlined } from '@ant-design/icons-vue';
  import Card from '@sscd/card';
  const tabList = [
    { key: 'tab1', tab: 'tab1' },
    { key: 'tab2', tab: 'tab2' },
  ];
  const contentList = { tab1: 'content1', tab2: 'content2' };
  const tabListNoTitle = [
    { key: 'article', tab: 'article' },
    { key: 'app', tab: 'app' },
    { key: 'project', tab: 'project' },
  ];
  const key = ref('tab1');
  const noTitleKey = ref('app');
  const onTabChange = (value: string, type: string) => {
    if (type === 'key') {
      key.value = value;
    } else if (type === 'noTitleKey') {
      noTitleKey.value = value;
    }
  };
</script>
